<template>
  <el-form
    :model="node"
    ref="dataForm"
    class="flowEditForm margin13"
    size="small"
  >
    <h3>节点属性</h3>
    <el-form-item label="节点ID">
      <el-input disabled v-model="node.id"></el-input>
    </el-form-item>
    <el-form-item label="名称">
      <el-input v-model="node.nodeName"></el-input>
    </el-form-item>
    <!-- <el-form-item label="活动类型">
            <el-select v-model="node.Type" placeholder="请选择">
                <el-option v-for="item in TypeList"
                           :key="item.Value"
                           :label="item.Text"
                           :value="item.Value">
                </el-option>
            </el-select>
        </el-form-item> -->
    <el-form-item label="节点性质" class="nodeProp" v-if="node.nodeType == '0'">
      <el-select
        v-model="node.nodeProp"
        placeholder="请选择节点性质"
        clearable
        @change="selectNode"
        size="small"
      >
        <el-option
          v-for="item in nodeProps"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-radio v-model="node.currentSubmit" label="1" v-if="node.nodeProp == 1"
        >当前用户提交</el-radio
      >
    </el-form-item>
    <el-form-item label="审批人" v-if="node.nodeProp == '0'&&node.nodeType == '0'" class="nodeProp">
      <el-select
        v-model="node.apprByType"
        placeholder="请选择配置方式"
        clearable
        size="small"
      >
        <el-option
          v-for="items in apprOptions"
          :key="items.value"
          :label="items.label"
          :value="items.value"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请选择审批人"
        v-model="node.apprByName"
        @focus="handleApprovalBy"
        clearable
        size="small"
        v-if="node.apprByType == '0'"
        style="margin-top:8px;"
      />
      <el-input
        placeholder="请选择审批人"
        v-model="node.apprByFieldName"
        @focus="handleApprovalByField"
        size="small"
        v-if="node.apprByType == '1'"
        style="margin-top:8px;"
      />
    </el-form-item>
    <el-form-item label="审批部门" class="nodeProp" v-if="node.nodeType == '0'">
      <el-select
        v-model="node.organizeType"
        placeholder="请选择配置方式"
        clearable
        size="small"
      >
        <el-option
          v-for="items in apprOptions"
          :key="items.value"
          :label="items.label"
          :value="items.value"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请选择部门"
        v-model="node.organizeFieldName"
        @focus="handleApprovalOrganizeField"
        size="small"
        v-if="node.organizeType == '1'"
        style="margin-top:8px;"
      />
    </el-form-item>
    <el-form-item label="审批角色" v-if="node.nodeProp == '0'&&node.nodeType == '0'" class="nodeProp">
      <el-input
        placeholder="请选择审批角色"
        v-model="node.apprRoleName"
        @focus="handleApprovalRole"
        clearable
        size="small"
      />
    </el-form-item>
    <el-form-item label="审批表单" v-if="node.nodeType == '0'">
      <el-input
        placeholder="请选择审批表单"
        v-model="node.formItemName"
        @focus="handleformItemCode"
        clearable
        size="small"
      />
    </el-form-item>
    <el-form-item label="通过方式" v-if="node.nodeType == '0'">
      <el-radio-group v-model="node.passType">
        <el-radio label="0">会签</el-radio>
        <el-radio label="1">或签</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="驳回方式" v-if="node.nodeType == '0'">
      <el-radio-group v-model="node.rejectType" style="margin-top:10px;">
        <el-radio label="0" style="margin-bottom:10px;">返回初始节点</el-radio>
        <el-radio label="1" style="margin-bottom:10px;">返回指定节点</el-radio>
        <el-radio label="2" style="margin-bottom:10px;"
          >审批页面自行决定</el-radio
        >
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="驳回节点"
      v-if="node.rejectType == '1' && node.nodeType == '0'"
      class="nodeProp"
    >
      <el-select
        v-model="node.rejectNodeId"
        placeholder="请选择驳回节点"
        clearable
        size="small"
      >
        <el-option
          v-for="item in rejectOptions"
          :key="item.id"
          :label="item.nodeName"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="办结时限(天)" v-if="node.nodeType == '0'">
      <el-input
        type="text"
        placeholder="请输入办结时限"
        v-model="node.timeLimit"
        size="small"
      ></el-input>
    </el-form-item>
    <el-form-item label="功能选择" v-if="node.nodeType == '0'">
      <div
        v-for="(item, $index) of functionList"
        :key="item.id"
        class="funcType"
      >
        <el-tooltip
          class="item"
          effect="dark"
          :content="item.funcName"
          placement="top"
        >
          <el-button type="primary" size="small">{{ item.funcName }}</el-button>
        </el-tooltip>

        <el-select
          v-model="funcType[$index]"
          placeholder="请选择功能"
          clearable
          @change="handleType($event, item.funcId)"
          size="small"
          width="80px"
        >
          <el-option
            v-for="items in funcOptions"
            :key="items.value"
            :label="items.label"
            :value="items.value"
          ></el-option>
        </el-select>
      </div>
    </el-form-item>
    <!-- <el-form-item label="备注" v-if="node.nodeType == '0'">
      <el-input
        v-model="node.Remark"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
      ></el-input>
    </el-form-item> -->
  </el-form>
</template>

<script>
export default {
  name: "editNode",
  data() {
    return {
      nodeData: {},
      node: {},
      TypeList: [
        { Value: 1, Text: "开始" },
        { Value: 2, Text: "结束" },
        { Value: 3, Text: "人工节点" }
      ],
      nodeProps: [
        {
          value: "0",
          name: "审批节点"
        },
        {
          value: "1",
          name: "录入节点"
        }
      ],
      apprOptions: [
        {
          value: "0",
          label: "系统配置"
        },
        {
          value: "1",
          label: "表单配置"
        }
      ],
      funcOptions: [
        {
          value: "0",
          label: "页面点击触发"
        },
        {
          value: "1",
          label: "提交时触发"
        },
        {
          value: "2",
          label: "返回时触发"
        },
        {
          value: "3",
          label: "页面进入时触发"
        }
      ],
      functionList: []
    };
  },
  computed: {
    rejectOptions() {
      let arrs = [];
      this.nodeData.nodeList.forEach(item => {
        if (item.nodeType == "1") {
        } else if (item.nodeType == "2") {
        } else {
          arrs.push(item);
        }
      });
      let obj = {};
      let newArr = arrs.reduce((cur, next) => {
        obj[next.id] ? "" : (obj[next.id] = true && cur.push(next));
        return cur;
      }, []);
      // console.log(arrs);
      return newArr;
    }
  },
  methods: {
    init(data, id) {
    //   console.log(6666);
      let obj = document.getElementsByClassName("node-item");
      for (var i = 0; i < obj.length; i++) {
        obj[i].style.backgroundColor = "#f5f7fa";
      }
      this.nodeData = data;
      data.nodeList.filter(node => {
        if (node.id === id) {
          this.node = node;
          console.log(this.node);
           document.getElementById(id).style.backgroundColor = "#66b1ff";
        }
      });
    },
    selectNode(val) {
      this.node.currentSubmit = val;
    },
    handleApprovalBy() {
      //   this.innerVisible = true;
      //   this.getApprovalUser();
    },
    clear1() {
      //    this.node.apprByName = '';
      //    this.node.apprBy  = '';
    },
    handleApprovalByField() {
      //   this.approveArr = []
      //   this.userName =''
      //   this.innerVisibleField = true;
      //    this.getApprovalField();
    },
    handleApprovalOrganizeField() {
      //   this.approveArr1 =[]
      //   this.innerVisibleOrganize = true;
      //    this.getApprovalOrganize();
    },
    handleApprovalRole() {
      //   this.innerVisible1 = true;
      //   this.getApprovalRole();
    },
    handleformItemCode() {
      //   this.itemVisible = true;
      //   this.getItemList();
    },
    handleType(ev, val) {
      //    let arrs = [];
      //   this.functionList.forEach((item, index) => {
      //     let obj = {
      //       funcId: item.id,
      //       handleType: this.funcType[index]
      //     };
      //     arrs.push(obj);
      //   });
      //   this.currentSelect.funcList = arrs;
      //   return arrs;
    },
    //获取所有功能列表
    getCheckboxNode() {
      console.log(6666);
      //   this.$axios
      //     .get(`/flow/func/findAllFuncListForBindNode`)
      //     .then(res => {
      //       // console.log(res.data.data)
      //       this.functionList = res.data.data;
      //       // console.log(this.functionList);
      //     })
      //     .catch(err => {});
    }
  }
};
</script>
<style scoped>
.flowEditForm /deep/ .el-form-item {
  margin-bottom: 5px;
}
.flowEditForm h3 {
  text-align: center;
  color: #1890ff;
  font-weight: normal;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.nodeProp /deep/ .el-select {
  width: 100%;
}
</style>
